<template>
    <div class="query">
        <el-select
            v-model="value2"
            multiple
            collapse-tags
            style="margin-left: 20px;"
            placeholder="请选择社区" class="selection">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label">
            </el-option>
        </el-select>
        <!-- 查询和重置按钮 -->
        <el-button type="primary" class="chaxun" @click="select"><i class="el-icon-search" ></i>查询</el-button>
        <el-button class="reaseat" @click="reasert"><i class="el-icon-refresh-right" ></i>重置</el-button>
    </div>
</template>

<script>
export default {
    props:{
        options:Array
    },
    data(){
        return{
            value2: [], //多选选项框
        }
    },
    methods:{
        select(){
            console.log('查询')
            this.$emit('send-value',this.value2)
        },
        reasert(){
            console.log('重置')
        }
    },
}
</script>

<style lang="scss" scoped>
    .query{
        width: 1260px;
        height: 95px;
        display: flex;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        border:  1px solid rgba(233, 233, 233, 1);
        padding-left: 20px;
        position: relative;
        .selection{
            width: 405px;
            ::v-deep .el-input__inner{
                height: 35px;
            }
        }
        // 查询按钮
        .chaxun{
            width: 80px;
            height: 35px;
            margin-left: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #0079fe !important;
            .el-icon-search{
                font-size: 16px;
                margin-right: 5px;
            }
        }
        .chaxun:hover{
            background-color: #66b1ff !important;
            color: #fff !important;
        }
        // 重置按钮
        .reaseat{
            width: 80px;
            height: 35px;
            margin-left: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff !important;
            .el-icon-refresh-right{
                font-size: 16px;
                margin-right: 5px;
            }
        }
        .reaseat:hover{
            border-color: #0079fe !important;
            color: #0079fe !important;
        }
        
    }
</style>